<template>
  <div class="right_index clearfix">
    <div class="content_scroll">
      <div class="clt-r_item">
        <ModuleTitle class="s_box" />
        <div class="box s_box">
          <shopNum :qgData="qgData" />
        </div>
      </div>

      <div class="clt-r_item">
        <ModuleTitle title="征信报告统计" class="s_box" />
        <div class="box s_box">
          <shopType :qgData="qgData" />
        </div>
      </div>

      <div class="clt-r_item">
        <ModuleTitle title="融资客户统计" class="s_box" />
        <div class="box s_box">
          <financingNum :qgData="qgData" />
        </div>
      </div>

      <div class="clt-r_item">
        <ModuleTitle title="累计融资金额统计" class="s_box" />
        <div class="box s_box">
          <creditStatistics :qgData="qgData" />
        </div>
      </div>

      <div class="clt-r_item">
        <ModuleTitle title="银行客户统计" class="s_box" />
        <div class="box s_box">
          <merchantsNum :qgData="qgData" />
        </div>
      </div>
      <div class="clt-r_item">
        <ModuleTitle title="银行征信报告统计" class="s_box" />
        <div class="box s_box">
          <flowingWaterStatistics :qgData="qgData" />
        </div>
      </div>
      <div class="clt-r_item">
        <ModuleTitle title="非银机构客户统计" class="s_box" />
        <div class="box s_box">
          <loanBalanceStatistics :qgData="qgData" />
        </div>
      </div>

      <div class="clt-r_item">
        <ModuleTitle title="非银机构征信报告统计" class="s_box" />
        <div class="box s_box">
          <payDiscountsStatistics :qgData="qgData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ModuleTitle from '../../ModuleTitle/index'
import shopNum from './shop/shopNum.vue'
import shopType from './shop/shopType.vue'
import financingNum from './blank/financingNum.vue'
import creditStatistics from './blank/creditStatistics.vue'
import loanBalanceStatistics from './blank/loanBalanceStatistics.vue'

import merchantsNum from './collectSingle/merchantsNum.vue'
import flowingWaterStatistics from './collectSingle/flowingWaterStatistics.vue'
import payDiscountsStatistics from './collectSingle/payDiscountsStatistics.vue'
export default {
  components: {
    shopNum,
    shopType,
    financingNum,
    creditStatistics,
    ModuleTitle,
    merchantsNum,
    flowingWaterStatistics,
    payDiscountsStatistics,
    loanBalanceStatistics,
  },
  props: ['qgData'],
  mounted() {},
}
</script>

<style lang="scss" scoped>
.right_index {
  position: absolute;
  top: 280px;
  right: 0px;
  /*width: 6246px - 1418px - 1760px;*/
  width: 3068px;
  float: left;
  left: 2992px;
  height: 1600px;
  cursor: pointer;
  z-index: 999;
  .content_scroll {
    height: 1000px;
    width: 100%;
    cursor: pointer;
    .clt-r_item {
      width: 730px;
      height: 641px;
      float: left;
      margin-right: 20px;
      margin-bottom: 204px;
      .content_title {
        font-size: 28px !important;
      }
      .ri_title {
        height: 84px;
        line-height: 84px;
        margin-bottom: 50px;
      }
    }

    .pb {
      padding-bottom: 20px;
    }

    .box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .module_title {
      padding: 20px 0;
      font-size: 30px;
      line-height: 30px;
      color: #fff;
      margin-bottom: 50px;
    }
  }
}
</style>
